const path = require('path')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
// 返回处理cssloader方法
const getStyleLoaders = (pre)=>{
   return   ["style-loader", "css-loader",
        // 处理css兼容性问题，
        // 配合package.json 中browserslist来指定兼容性
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins:["postcss-preset-env"]
                    }
                },
            },
            pre,
        ].filter(Boolean)
}
console.log(getStyleLoaders());
module.exports = {
    entry: './src/main.js',
    output: {
        path: undefined,
        filename: 'static/js/[name].js', //入口文件打包文件名
        chunkFilename: 'static/js/[name].chunk.js', // 非入口的chunk文件名
        assetModuleFilename: 'static/media/[name].[hash:8].[ext]' // 图片、字体等资源文件名
    },
    module: {
        //处理css
        rules: [{
            test: /\.css$/,
            use: getStyleLoaders(),

        },
        {
            test: /\.less$/,
            use: getStyleLoaders('less-loader'),// 处理less文件，需要安装less-loader插件

        },
        {
            test: /\.s[ac]ss$/,
            use: getStyleLoaders('sass-loader'),// 处理sass文件，需要安装sass-loader插件

        },
        
        {
            test: /\.styl$/,
            use:getStyleLoaders('stylus-loader'),

        },
        // 处理图片
        {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
                dataUrlCondition: {
                    maxSize: 10 * 1024 // 小于10kb的图片会被base64处理，减少网络请求，但是图片会变大
                }
            }
        },
        // 处理其他资源

        {
            test: /\.(woff2?|ttf)$/,
            type: 'asset/resource',
        },
        // 处理 代码检查，

        {
            test: /\.jsx?$/,
            include: path.resolve(__dirname, '../src'), // 指定检查的目录
            loader:'babel-loader',
            options:{
                cacheDirectory:true, // 开启babel缓存
                cacheCompression:false, // 缓存文件不要压缩
                plugins:['react-refresh/babel'] //激活js的HMR
            }
        }
    ]
    
    },
    // 处理html 
    plugins: [
        new EslintWebpackPlugin({
            context: path.resolve(__dirname, '../src'), // 指定检查的目录
            exclude: 'node_modules', // 排除检查的目录
            cache:true, // 开启缓存
            cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存存放的位置
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html'),
        }),
        new ReactRefreshWebpackPlugin(),
    // 多进程打包，项目过大时配置

    ],
    mode:"development",
    devtool:"cheap-module-source-map",
    optimization:{
        splitChunks:{
            chunks:"all",//
        },
        runtimeChunk:{
            name:(entrypoint)=>`runtime~${entrypoint.name}.js`
        }
    },
    // 自动补全文件扩展名
    resolve:{
        extensions:['.jsx','.js','.json'],
        // alias:{
        //     '@':path.resolve(__dirname, '../src'),
        //     'pages':path.resolve(__dirname, '../src/pages'),
        //     'components':path.resolve(__dirname, '../src/components'),
        // }
    },
    // 开启热模块替换
    devServer:{
        host:"localhost",
        port:3000,
        open:true,
        hot:true,//开启HMR
        historyApiFallback:true,//解决路由刷新404问题
    }


}